<template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select
          v-model="searchObj.collegeId"
          placeholder="请选择学院"
          @change="collegeNameChanged()"
        >
          <el-option
            v-for="item in CollegeList"
            :key="item.collegeId"
            :label="item.collegeName"
            :value="item.collegeId"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="searchObj.coursesId" placeholder="请选择课程">
          <el-option
            v-for="item in courseList"
            :key="item.coursesId"
            :label="item.coursesName"
            :value="item.coursesId"
          />
        </el-select>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search">查询</el-button>
      <el-button type="default" @click="reset()">清空</el-button>
    </el-form>

    <div>
      <el-button type="success" icon="el-icon-download" @click="exportScores()" class="btnDownload">
        导出成绩表</el-button
      >
    </div>

    <el-table :data="scores" style="width: 100%" border class="scoreTable">
      <el-table-column type="index" width="50" label="序号" align="center">
      </el-table-column>
      <el-table-column prop="studentName" label="学生名称" align="center">
      </el-table-column>
      <el-table-column prop="coursesName" label="课程名称" align="center">
      </el-table-column>
      <el-table-column prop="collegeName" label="所属学院" align="center">
      </el-table-column>
      <el-table-column prop="usualScore" label="平时成绩" align="center">
      </el-table-column>
      <el-table-column prop="finalScore" label="考试成绩" align="center">
      </el-table-column>
      <el-table-column prop="score" label="总成绩" align="center">
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="getScoreList"
    />
  </div>
</template>

<script>
import scoreApi from "@/api/score";

import courseApi from "@/api/course";
import collegeApi from "@/api/college";


export default {
  data() {
    return {
      scores: [],
      CollegeList: [],
      courseList: [], //课程列表信息
      searchObj: {},
      page: 1,
      limit: 10,
      total: 0,
    };
  },
  methods: {
    collegeNameChanged() {
      courseApi
        .getCourseListByCollegeId(this.searchObj.collegeId)
        .then((res) => {
          this.courseList = res.data.list;
        });
    },
    getCollegeList() {
      collegeApi.getCollegeList().then((res) => {
        this.CollegeList = res.data.page.list;
      });
    },
    getScoreList(current = 1) {
      this.page = current;
      scoreApi
        .getScoreListPages(this.page, this.limit, this.searchObj)
        .then((res) => {
          this.scores = res.data.rows;
          this.total = res.data.total;
        });
    },
    reset() {
      this.searchObj = {};
    },
    exportScores() {
      window.location.href="http://120.27.131.93:8080/study/coursescore/exportExcel";
    },
  },
  created() {
    this.getScoreList();
    this.getCollegeList();
  },
};
</script>

<style>
.btnDownload{
  margin-bottom: 15px;
}
</style>